import { Checkbox, Col } from 'antd';
import { CheckboxValueType } from 'antd/es/checkbox/Group';
import { useEffect, useState } from 'react';

const Index = (props: any) => {
  const plainOptions = props.menuList;

  const [checkedList, setCheckedList] = useState<CheckboxValueType[]>([]);

  const onChange = (list: CheckboxValueType[]) => {
    setCheckedList(list);
  };

  useEffect(() => {
    setCheckedList(Array.from(new Set(props.groupItem.menuIdList)));
  }, []);

  const checkAll = plainOptions.length === checkedList.length;

  const indeterminate = checkedList.length > 0 && checkedList.length < plainOptions.length;
  const onCheckAllChange = (e: any) => {
    setCheckedList(
      e.target.checked ? ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] : [],
    );
  };
  useEffect(() => {
    for (let i = 0; i < props.dataList.length; i++) {
      const element = props.dataList[i];
      if (element.groupId == props.groupItem.groupId) {
        element.menuIdList = checkedList;
      }
    }
  }, [checkedList]);
  return (
    <div style={{ width: '100%', display: 'flex', marginTop: 10 }}>
      <Col span={4}>{props.groupItem.groupName}</Col>
      <Col span={20}>
        <Checkbox.Group options={plainOptions} value={checkedList} onChange={onChange} />
        <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
          全选
        </Checkbox>
      </Col>
    </div>
  );
};
export default Index;
